<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="名称" prop="providerName">
          <el-input
            v-model="queryParams.providerName"
            placeholder="请输入"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-table v-loading="loading" :data="tableData" border>
        <el-table-column label="名称" prop="providerName" />
        <el-table-column label="访问模式" prop="accessMode">
          <template #default="scope">
            <el-tag v-if="scope.row.accessMode === 'public'" type="success">公开</el-tag>
            <el-tag v-if="scope.row.accessMode === 'whitelist'" type="primary">白名单</el-tag>
            <el-tag v-if="scope.row.accessMode === 'blacklist'" type="warning">黑名单</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="白名单或黑名单" prop="accessList">
          <template #default="scope">
            {{ scope.row.accessList.length ? scope.row.accessList.join(",") : "--" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" link @click="handleEdit(scope.row)">设置权限</el-button>
            <el-button type="danger" link @click="handleDelete(scope.row.providerName)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-content">
        <el-pagination
          v-model:current-page="paging.page"
          v-model:page-size="paging.size"
          :page-sizes="[10, 20, 30, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <edit-form ref="editFormRef" @refresh="handleResetQuery" />
  </div>
</template>

<script setup>
import ProviderAPI from "@/api/virtual-number/provider.api"
import EditForm from "./form.vue"
import useToggle from "@/hooks/useToggle"
const [loading, setLoading] = useToggle()

const queryParams = ref({
  providerName: void undefined,
})

const paging = ref({
  size: 10,
  page: 1,
  total: 0,
})

const tableData = ref([])

const handleSizeChange = (e) => {
  paging.value.size = e
  getList()
}
const handleCurrentChange = (e) => {
  paging.value.page = e
  getList()
}

const handleQuery = () => {
  paging.value.page = 1
  getList()
}

const getList = async () => {
  setLoading(true)
  const list = await ProviderAPI.getList({
    providerName: queryParams.value.providerName || void undefined,
    limit: paging.value.size,
    offset: (paging.value.page - 1) * paging.value.size,
  }).finally(() => setLoading(false))

  const total = await ProviderAPI.getCount({
    ...queryParams.value,
    limit: paging.value.size,
    offset: (paging.value.page - 1) * paging.value.size,
  }).finally(() => setLoading(false))

  tableData.value = list
  paging.value.total = total
}

const queryFormRef = ref(null)
const handleResetQuery = () => {
  paging.value.page = 1
  paging.value.size = 10
  queryFormRef.value.resetFields()
  handleQuery()
}

const editFormRef = ref(null)
const handleEdit = (row) => {
  editFormRef.value.init(row)
}

const handleDelete = (name) => {
  ElMessageBox.confirm("是否确认删除平台?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    loading.value = true
    ProviderAPI.delete(name).then(() => {
      loading.value = false
      ElMessage({
        message: "删除成功",
        type: "success",
      })
      getList()
    })
  })
}

onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.pagination-content {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
